<template>
	<view class='editCar' >
		<view class="part" >
			<view class="partVal">
				<view class="line dFlex jBetween_aCenter">
					<text>姓名</text>
					<view class="val" @click='closeKeyboard'>
						<input type="text" v-model="carInfo.trueName" placeholder="请填写车主姓名" placeholder-class="iptVal"/>
					</view>
				</view>
				<view class="line dFlex jBetween_aCenter">
					<text>联系方式</text>
					<view class="val" @click='closeKeyboard'>
						<input type="number" v-model="carInfo.tel" placeholder="请填写手机号码" placeholder-class="iptVal"/>
					</view>
				</view>
				<view class="line dFlex jBetween_aCenter">
					<text>随车手机</text>
					<view class="val" @click='closeKeyboard'>
						<input type="number" v-model="carInfo.tel2" placeholder="请填写手机号码" placeholder-class="iptVal"/>
					</view>
				</view>
				<view class="line dFlex jStart_aCenter">
					<text>车牌号码</text>
					<view class="val">
						<CarNumber ref='carNumber' v-model="carInfo.car_number" @error="onCheckError"></CarNumber>
						<!-- <input type="text" v-if='!carInfo.car_number' disabled placeholder="请完善车牌号码" placeholder-class="iptVal"/> -->
					</view>
				</view>
				<view class="line dFlex jStart_aCenter">
					<text>货车类型</text>
					<view class="val" @click='closeKeyboard'>
						<picker mode="selector" :range="carType" @change="chooseCarType">
							<input v-if='!carInfo.car_type' type="text" disabled placeholder="请选择货车类型" placeholder-class="iptVal"/>
							<text v-else>{{carInfo.car_type}}</text>
						</picker>
					</view>
				</view>
				<view class="line dFlex jStart_aCenter">
					<text>载重吨数</text>
					<view class="val" @click='closeKeyboard'>
						<input type="text" v-model="carInfo.car_load" placeholder="请填写货车载重" placeholder-class="iptVal"/>
					</view> 
				</view>
				<view class="line dFlex jStart_aCenter">
					<text>是否闲置</text>
					<view class="val dFlex jEnd_aCenter">
						<u-switch size='15' v-model="carInfo.is_use" activeValue='1' inactiveValue='2'></u-switch>
					</view>
				</view>
				<view class="line dFlex jStart_aCenter">
					<text>驾驶证</text>
					<view class="val dFlex jEnd_aCenter" style="margin-left: 100px;"  @click='chooseImg(1)'>
						<image :src='carInfo.images1'  style="height: 100px;"></image>
					</view>
				</view>
				<view class="line dFlex jStart_aCenter">
					<text>行驶证</text>
					<view class="val dFlex jEnd_aCenter" style="margin-left: 100px;margin-top: 10px;"  @click='chooseImg(2)'>
						<image :src='carInfo.images2'  style="height: 100px;"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="btns dFlex jAround_aCenter" :style="{
			'padding-bottom':isIos ? 'env(safe-area-inset-bottom)' : '12px'
		}">
			<view class="btn len1 sty1" @click='saveCarInfo'>保存信息</view>
		</view> 
	</view> 
</template>

<script> 
	import{
		platformInfo,
		carInfo,
		addcar
	} from '@/tool/http.js';
	import CarNumber from '@/components/hg-car-number/car-number'
	import config from '@/tool/common.js';
	export default {
		components:{
			CarNumber
		},
		data() {
			return {
				isIos:getApp().globalData.isIos,
				carType:[],
				carInfo:{
					id:"",
					trueName:'',
					tel:'',
					tel2:'',
					car_type:'',
					car_number:'',
					car_load:'',
					image1:'',
					image2:'',
					images1:config.domain+'/public/upload.png',
					images2:config.domain+'/public/upload.png',
					is_use:'1'
				}
			};
		},
		onLoad(e) {
			this.carInfo.id = e.carId ? e.carId : ''; 
			if(this.carInfo.id){
				this.getCarInfo();
			}
		},
		onShow() {
			this.carInfo.memberId = uni.getStorageSync('uid');
			console.log(this.carInfo);
			this.getPlatformInfo();
		},
		methods:{
			closeKeyboard(){
				if(this.$refs.carNumber.isFocus){
					this.$refs.carNumber.hideKeyboard();
				}
			},
			// 选择图片
			chooseImg(type){
				uni.chooseImage({
					count:1,
					mediaType:['image'],
					sourceType:['album', 'camera'],
					success:(file)=>{
						if(file.tempFilePaths.length){
							uni.uploadFile({
								url:config.domain+'/ship.php/Regist/uploadimage',
								filePath:file.tempFilePaths[0],
								name:'image',
								success: async(res) => {
									res = JSON.parse(res.data);
									console.log(res.data.image_path);
									if(res.code == 200){
										if(type==1){
											this.carInfo.image1=res.data.image_path;
											this.carInfo.images1=config.domain+'/'+res.data.image_path;
										}
										if(type==2){
											this.carInfo.image2=res.data.image_path;
											this.carInfo.images2=config.domain+'/'+res.data.image_path;
										}	
									}
								},
								fail:(err)=>{
									console.log(err)
									uni.showToast({
										title:'图片上传失败',
										icon:"none"
									})
								}
							})
						}
					},
					fail:(err)=>{
						console.log(err);
					}
				})
			},
			async getCarInfo(){
				let res = await carInfo({
					id:this.carInfo.id,
				});
				if(res){
					this.carInfo = res;
					this.carInfo.memberId = uni.getStorageSync('uid');
					this.carInfo.images1=config.domain+'/'+res.image1;
					this.carInfo.images2=config.domain+'/'+res.image2;
				}
			},
			// 保存车辆信息
			async saveCarInfo(){
				var tips = '';
				if(!this.carInfo.trueName){
					tips = '请输入车主姓名';
				}
				if(!this.carInfo.tel){
					tips = '请输入车主联系方式';
				}
				if(this.carInfo.tel.length != 11){
					tips = '车主联系方式格式不正确';
				}
				if(!this.carInfo.tel2){
					tips = '请输入随车电话';
				}
				if(this.carInfo.tel2.length != 11){
					tips = '随车电话格式不正确';
				}
				if(!this.carInfo.car_type){
					tips = '请选择车辆类型';
				}
				if(!this.carInfo.car_number){
					tips = '请输入车牌号码';
				}
				if(!this.carInfo.car_load){
					tips = '请输入车辆载重';
				}
				if(!this.carInfo.image1){
					tips = '请上传驾驶证';
				}
				if(!this.carInfo.image2){
					tips = '请上传行驶证';
				}
				if(tips){
					uni.showToast({
						title:tips,
						icon:"none"
					})
					return;
				}
				var res = await addcar(this.carInfo);
				if(res){
					uni.showToast({
						title:"信息已保存",
						icon:"success"
					})
					setTimeout(()=>{
						uni.navigateTo({
							url:'/person/team'
						})
						
					},1650)
				}
			},
			onCheckError(){
				
			},
			async getPlatformInfo(){
				let res = await platformInfo({});
				if(res){
					this.carType = res.car_type;
				}
			},
			// 选择货车类型
			chooseCarType(e){
				this.carInfo.car_type = this.carType[e.detail.value];
			},
		}
	}
</script>

<style lang="scss">
	.editCar{
		.btns{
			.btn{
				width:100%;
				padding: 10px 0;
				border-radius: 4px;
				text-align: center;
				border:1px solid #f6f6f6;
			}
			.len1{
				width: 100%;
			}
			
			.sty1{
				color: white;
				background: #0087FC;
				border-color: #0087FC;
			}
			width:100%;
			position: fixed;
			left:0;
			bottom: 0;
			padding: 12px;
			box-sizing: border-box;
		}
		.part{
			.partVal{
				.line{
					width: 100%;
					font-size: 12px;
					line-height: 35px;
					color: #666666;
					.val{
						font-size: 14px;
						flex:1;
						text-align: right;
						margin-left: 8px;
					}
				}
				width: 100%;
				padding: 12px;
				background: white;
				border-radius: 4px;
				box-sizing: border-box;
			}
			width: 100%;
			margin-bottom: 12px;
			background: white;
			border-radius: 5px;
		}
		width: 100%;
		position: relative;
		padding: 12px;
		box-sizing: border-box;
	}
</style>
